//创建一个可以执行简单动画的函数
/*
 *参数：
 *  obj：要执行的动画的对象
 *  attr：要执行动画的样式，比如：left top width height
 *  target:执行动画的目标位置
 *  speed：移动的速度（正数向右移动，负数向左移动）
 *  callblack:回调函数，这个函数将在动画执行完毕以后执行。
 */
function move(obj, attr, target, speed, callblack) {

	//关闭上一个定时器
	clearInterval(obj.timer);

	//获取元素当前的位置
	var current = parseInt(getStyle(obj, attr));

	//判断速度的正负值
	//如果从0向800移动，则speed为正
	//如果从800向0移动，则speed为负
	if (current > target) {
		speed = -speed;
	}

	//开启一个定时器，用来执行动画效果
	obj.timer = setInterval(function() {

		//获取box1的原来的left值
		var oldValue = parseInt(getStyle(obj, attr));

		//在旧值的基础上增加
		var newValue = oldValue + speed;

		//判断newValue是否大于800
		//向左移动时（speed的值小于0），需要判断newValue是否小于target
		//向右移动时（speed的值大于0），需要判断newValue是否大于target
		if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
			newValue = target;
		};

		//将新值设置给box1
		obj.style[attr] = newValue + "px";

		//当元素移动到0px时，使其停止执行动画
		if (newValue == target) {
			clearInterval(obj.timer);
			//动画执行完毕，调用回调函数(此处增加回调函数可以使动画出现多种效果！)
			callblack && callblack();
		}

	}, 30);

}

//getStyle在IE浏览器中获取的left值有可能是auto，
//为了避免这种情况，所以在css样式中，可以先设置left的初始值。
function getStyle(obj, name) {
	if (window.getComputedStyle) {
		return getComputedStyle(obj, null)[name];

	} else {
		return obj.currentStyle[name];
	}

}





//定义一个函数，用来向一个元素中添加指定的class属性值
/* 
 *参数：
 * obj 要添加的class属性的元素
 * cn 要添加的class值
 */
function addClass(obj, cn) {

	//检查obj中是否含有cn
	if (!hasClass(obj, cn)) {
		obj.className += " " + cn;
	};


}

/* 
 *判断一个元素中是否含有指定的class属性值
 * 如果有该class，则返回true，没有则返回false
 */
function hasClass(obj, cn) {

	//判断obj中有没有cn class
	//创建一个正则表达式
	//var reg = /\bb2\b/;(此种形式不灵活)
	var reg = new RegExp("\\b" + cn + "\\b");

	return reg.test(obj.className);

}

/* 
 *删除一个元素中指定的class属性
 */
function removeClass(obj, cn) {
	//创建一个正则表达式
	var reg = new RegExp("\\b" + cn + "\\b");

	//删除class
	obj.className = obj.className.replace(reg, "");
}

/* 
 *toggleClass可以用来切换一个类
 * 如果元素中具有该类，则删除
 * 如果元素中没有该类，则添加
 */
function toggleClass(obj, cn) {

	//判断obj中是否含有cn
	if (hasClass(obj, cn)) {
		//有，则删除
		removeClass(obj, cn);
	} else {
		//没有，则添加
		addClass(obj, cn);
	}
}
/* 
 *定义一个函数名为ajax的Ajax请求函数，默认请求方式为get
 */

function ajax (option){
				var method = option.method || "GET";
				 var data = option.data || {};//{pageNum:1,pageSize:2}
				 var url = option .url;//http://localhost......
				 
				 if(method == "get"){
					 var str = "?";
					 for(var key in data){
						 str += key + "=" + data[key] + "&"; //pageNum=1pageSize=10
					 }
					 //切掉最后的一个&符号
					 str =str.slice(0,strlength-1);
					 url += str;	 
				 }
				 //将参数拼接到url上
				 console.log(url);
				 //1、创建ajax对象
				 var xhr = new XMLHttpRequest();
				 //2、建立连接
				 xhr.open(method,url,true);
				 //3、发送请求
				 xhr.send();
				 //4、监听数据回来
				 xhr.onreadystatechange = function(){
					 //xhr.readyState === 4  表示服务器返回数据
					 //xhr.status == 200  表示服务器返回正确的数据
					 if(xhr.readyState === 4 && xhr.status == 200 ){
						 var res = JSON.parse(xhr.responseText);
						 option.success(res);
					 }
				 }
			}	
/* 
			 *ajax调用
			 * 
			 * ajax({
				 url:"http://loc.....",
				 success:function(res){
					 console.log(res);
				 },
				 method:"get",
				 data:{
					 pageNum:1,
					 pageSize:10,
				 }
				 
			 })
			 * 
			 */


/* 
 *获取当前有效样式浏览器兼容的写法
 * 
 * node：节点
 * cssStr：样式
 */
function getStyle(node,cssStr){
	return node.currentStyle ? node.currentStyle[cssStr] : getComputedStyle(node)[cssStr];
}
/* 
 *例子：
 * window.onload = function(){
 *		var oDiv = document.getElementById("div1");
 *		setInterval(function(){
 *			//获取当前值
 *			var iCur = parseInt(getStyle(oDiv,"width"));
 *			oDiv.style.width = iCur - 1 + "px"
 *		},30)
 *	}
 * 
 */


//随机选择颜色的函数
			function randomColor(){
				var str = "rgba(" + parseInt(Math.random() * 256) + ","+ parseInt(Math.random() * 256) +","+ parseInt(Math.random() * 256) +","+Math.random().toFixed(1) +")";
				return str;
			}
			



/* 
 碰撞函数的封装
 思路：找出两个物体怎样是绝对碰不上的，那它的反事件便是碰上了
 */
function konck(node1, node2) {
	var l1 = node1.offsetLeft;
	var r1 = node1.offsetLeft + node1.offsetWidth;
	var t1 = node1.offsetTop;
	var b1 = node1.offsetTop + node1.offsetHeight;

	var l2 = node2.offsetLeft;
	var r2 = node2.offsetLeft + node2.offsetWidth;
	var t2 = node2.offsetTop;
	var b2 = node2.offsetTop + node2.offsetHeight;

	if (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1) {
		return false;
	} else {
		return true;
	}
}
